<template>
  <div>
    <h3>群组设置</h3>
    <div class="title">
      <el-upload
        v-if="group.bg_image"
        class="wallpaper-uploader"
        :show-file-list="false"
        action=""
        :before-upload="changeWallPaper">
        <img class="wallpaper" :src="group.bg_image" v-if="group.bg_image" title="点击更换北京背景">
      </el-upload>
      <div class="avatar-container">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action=""
          :before-upload="changeAvatar">
          <img v-if="group.avatar" :src="group.avatar" class="avatar" title="点击更换头像">
        </el-upload>
        <h2>{{group.name}}</h2>
      </div>
    </div>
    <el-form label-width="80px" class="form">
      <el-form-item label="群组名称">
        <el-input v-model="group.name"></el-input>
      </el-form-item>
      <el-form-item label="群组ID">
        <el-input v-model="group.id" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="群组地址">
        <el-input v-model="group.address"></el-input>
      </el-form-item>
      <el-form-item label="群组介绍">
        <el-input type="textarea" autosize v-model="group.desc"></el-input>
      </el-form-item>
      <el-form-item label="动态权限" style="text-align:left">
        <el-radio v-model="group.permission" label="1">公开可见</el-radio>
        <el-radio v-model="group.permission" label="2">仅小组内</el-radio>
      </el-form-item>
      <el-form-item label="通讯录" style="text-align:left">
        <el-radio v-model="group.contacts" label="1">使用</el-radio>
        <el-radio v-model="group.contacts" label="2">不使用</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Save">保存</el-button>
        <el-button @click="Init">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  /* eslint-disable spaced-comment,no-undef */

  import GroupIntroduce from '@/components/smallComponents/groupintroduce'
  import { groupReadInfo, groupInfoUpdate, getImageUrl } from '../../public/api'
  import { Upload } from '../../public/util'

  export default {
    components: {GroupIntroduce},
    data () {
      return {
        group: {
          name: '',
          id: '',
          address: '',
          desc: '',
          bg_image: '',
          avatar: '',
          permission: '',
          contacts: ''
        }
      }
    },
    methods: {
      getImageUrl: getImageUrl,
      changeAvatar (file) {
        var _this = this
        Upload(file, 'group/avatar', function (x) {
          _this.group.avatar = getImageUrl(x)
          this.form.avatar = getImageUrl(x)
        })
        return false
      },
      changeWallPaper (file) {
        var _this = this
        Upload(file, 'group/avatar', function (x) {
          _this.group.bg_image = getImageUrl(x)
        })
        return false
      },
      Init () {
        this.group.id = this.$route.params.group_id || this.Group_id
        groupReadInfo({
          group_id: this.group.id
        }).then(
          data => {
            var content = data.data
            console.log(content)
            this.group.name = content.name
            this.group.address = content.detail_address || ''
            this.group.desc = content.Introduction
            this.group.avatar = content.avatar || 'http://via.placeholder.com/120x120'
            this.group.bg_image = content.wallpaper || 'http://via.placeholder.com/700x300'
            this.group.permission = content.country
            this.group.contacts = content.province
          }
        ).catch()
      },
      Save () {
        groupInfoUpdate({
          group_id: this.group.id,
//          user_id: this.User_id,
          name: this.group.name,
          detail_address: this.group.address,
          desc: this.group.desc,
          avatar: this.group.avatar,
          wallpaper: this.group.bg_image,
          permission: this.group.permission,
          contacts: this.group.contacts
        }).then(
          data => {
            console.log(data)
            if (!data.status) {
              this.$message(data.msg)
            } else {
              this.$message.success(data.msg)
            }
          }
        ).catch()
      }
    },
    mounted () {
      this.Init()
    },
    watch: {},
    computed: {
      getUrl () {
        return this.$store.state.url
      },
      User_id () {
        return this.$store.state.user_id
      },
      Group_id () {
        return this.$store.state.current_group
      }
    }
  }
</script>
<style scoped>
  .title .wallpaper {
    width: 700px;
    height: 300px;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.27);
  }

  .title {
    height: 300px;
    width: 700px;
    margin: 0 auto;
    overflow: hidden;
  }

  .title .avatar {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.27);
  }

  .title h2 {
    color: #fff;
    text-shadow: 0 2px 10px black;
  }

  .title > .avatar-container {
    margin-top: -200px;
    width: 700px;
    height: 170px;
  }

  .form {
    background: white;
    width: 600px;
    margin: 30px auto;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.27);
  }

  .avatar-uploader {

  }

  .wallpaper-uploader {
    width: 700px;
    height: 300px;
  }

</style>
